<template>
	<view>
		<!-- 名片区域 -->
		<view class="u-padding-25 u-padding-bottom-0 w-100">
			<!-- 未添加名片提示 -->
			<template v-if="cardInfo.is_card == 0">
				<view class="u-flex u-padding-25  add-user-business-card-area">
					<view class="u-flex u-flex-1">
						<image class="icon-xl" src="https://resource.lanbaozixun.com/uploads/images/20250207211049096e99242.png" mode="widthFix"></image>
						<view class="white u-margin-left-15">
							<view class="nr bold ">一键插入自己的营销名片</view>
							<view class="xs">让每一次交换都闪耀</view>
						</view>
					</view>
					<u-button url="/yixu/pages/network_square/my_business_card/edit" type="primary" hover-class="none"
						:plain="true" shape="circle" size="mini"
						:custom-style="{ color: 'white !important',background:'#1C76EC !important',borderColor:'#1C76EC !important' }">
						去添加
						<u-icon class="u-margin-left-10" name="play-right-fill" color="white" size="18"></u-icon>
					</u-button>
				</view>
			</template>

			<!-- 名片展示区域 -->
			<template v-else-if="cardInfo.is_card == 1">
				<view :class="{'user-information-bg':!cardInfo || (cardInfo && cardInfo.is_vip != 1)}">
					<!-- 非会员提示 -->
					<view v-if="!cardInfo || (cardInfo && cardInfo.is_vip != 1)"
						class="hint-buy-vip-area u-flex u-row-between u-padding-20">
						<text>名片已锁定,客户无法查看到您的信息!</text>
						<navigator hover-class="none" url="/pages/user_vip/user_vip"
							class="go-buy-btn xs u-font-weight-500">立即解锁</navigator>
					</view>
					<view class="user-information-area u-margin-bottom-25"
						:class="{ 'user-information-area-bg': !cardInfo || (cardInfo && cardInfo.is_vip !== 1) }">
						<view class="user-information-show-area u-border-radius-10">
							<!-- 头像、姓名、职位、公司名称 -->
							<view class="u-flex u-padding-30">
								<view class="u-flex-1">
									<view class="u-flex ">
										<text class="xxl u-font-weight-500 ">{{ cardInfo.name || '' }}</text>
										<text class="u-padding-left-10">{{ cardInfo.position || '' }}</text>
									</view>
									<view class="">{{ cardInfo.company_name || '' }}</view>
								</view>
								<u-avatar :src="cardInfo.avatar" :size="94"></u-avatar>
							</view>
							<!-- 数据统计 -->
							<view class="u-flex u-padding-left-30 u-padding-bottom-30">
								<view class=" u-flex u-text-center u-padding-right-15">
									<view class="xxs">从业时长(年)</view>
									<view class="xl u-padding-bottom-5 u-color-F8B12F u-padding-left-15">
										{{ cardInfo.years_working || 0 }}
									</view>
								</view>
								<view class=" u-flex u-text-center left-interval right-interval u-padding-right-15 u-padding-left-15">
									<view class="xxs">专业评分(星)</view>
									<view class="xl u-padding-bottom-5 u-color-F8B12F u-padding-left-15">
										{{ cardInfo.score || '0.00' }}
									</view>
									
								</view>
								<view class=" u-flex u-text-center u-padding-right-15 u-padding-left-15">
									<view class="xxs">累计服务(次)</view>
									<view class="xl u-padding-bottom-5 u-color-F8B12F u-padding-left-15">
										{{ cardInfo.services_sum_count || 0 }}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			cardInfo: {
				type: Object,
				default: () => ({})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.u-padding-bottom-0{
		padding-bottom: 0 !important;
	}
	.add-user-business-card-area {
		border-radius: 20rpx 20rpx 0 0;
		background: url('https://resource.lanbaozixun.com/uploads/images/20250207211048cec1f3748.png') no-repeat;
		background-size: 100% 100%;
	}

	.user-information-area-bg {
		background: #313140;
	}

	.user-information-area {
		border-radius: 22rpx;

		.user-information-show-area {
			background: url('https://resource.lanbaozixun.com/uploads/images/20240921135703a68a01568.png') no-repeat;
			background-size: 100% 100%;

			.left-interval,
			.right-interval {
				position: relative;

				&::before,
				&::after {
					content: '';
					width: 2rpx;
					height: 30rpx;
					position: absolute;
					background: #CCCCCC;
					top: calc(50% - 15rpx);
				}

				&::before {
					left: 0;
				}

				&::after {
					right: 0;
				}
			}
		}


	}

	.hint-buy-vip-area {
		color: #FFE2AD;
	}

	.user-information-bg {
		border-radius: 15rpx;
		background: linear-gradient(to bottom, #40392F 0%, #2C2720 80%, transparent 90%);
		
		.go-buy-btn{
			color: #2B2100;
			padding: 5rpx 20rpx;
			font-size: 23rpx;
			border-radius: 100rpx;
			background: linear-gradient( 90deg, #E9BB69 0%, #F9DF84 100%);
		}
	}
</style>